<!--  -->
<template>
  <div class="good-detail">
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" indicator-color="red">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img width="100%" v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <!-- 商品名称和价格 -->
    <van-cell-group>
      <van-cell>
        <div class="good-name">苹果电脑</div>
        <div class="good-price">￥12345.00</div>
      </van-cell>
    </van-cell-group>
    <!--商品其他信息 -->
    <van-cell-group>
      <van-cell class="info">
        <van-col span="8">运费：免运费</van-col>
        <van-col span="16">剩余：19</van-col>
      </van-cell>
    </van-cell-group>
    <!-- 有赞的点 -->
    <van-cell-group>
      <van-cell class="info" icon="gift-o" value="进入店铺" is-link>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span class="custom-title">有赞的店铺</span>
          <van-tag type="danger">官方</van-tag>
        </template>
      </van-cell>
    </van-cell-group>
    <!-- 线下门店 -->
    <van-cell-group>
      <van-cell
        class="info"
        icon="location-o"
        title="线下门店"
        is-link
      ></van-cell>
    </van-cell-group>
    <!-- 查看商品详情 -->
    <van-cell-group>
      <van-cell class="info" title="查看商品详情" is-link></van-cell>
    </van-cell-group>
    <!-- 商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot @click="kefu"/>
      <van-goods-action-icon icon="cart-o" text="购物车" badge="5" @click="mycart"/>
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" @click="abc"/>
      <van-goods-action-button type="warning" text="加入购物车" @click="abc"/>
      <van-goods-action-button type="danger" text="立即购买" @click="abc"/>
    </van-goods-action>
  </div>
</template>

<script>
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from "vant";
export default {
  data() {
    return {
      images: [
        "https://img.yzcdn.cn/vant/apple-1.jpg",
        "https://img.yzcdn.cn/vant/apple-2.jpg",
      ],
    };
  },
  //   created() {
  //       let id = this.$route.params.id
  //       this.$http({
  //           url:'/api/goodsdetailj',
  //           params:{
  //               id:id
  //           }
  //       }).then(res)
  //   },
  components: {
    [GoodsAction.name]:GoodsAction,
    [GoodsActionIcon.name]:GoodsActionIcon,
    [GoodsActionButton.name]:GoodsActionButton
  },
  methods: {
    kefu(){
      this.$toast('点击了客服')
    },
    mycart(){
      // this.$toast('点击了购物车')
      this.$router.push({path:'/mycart'})
    },
    abc(){
      this.$toast('点击了...')
    }
  },
};
</script>
<style lang='scss' scoped>
* {
  margin: 0;
  padding: 0;
}
.good-detail {
  .good-name {
    font-size: 20px;
    font-weight: 700;
    margin: 20px 0 5px 20px;
  }
  .good-price {
    font-size: 12px;
    color: red;
    margin: 5px 0 5px 20px;
  }
  .info {
    padding: 10px 20px;
    font-weight: 700;
  }
  .custom-title {
    margin-right: 4px;
    vertical-align: middle;
  }
  .van-tag {
    padding: 2px 5px;
  }
}
</style>